import {Component, ComponentProps, VueComponent, Mut, Computed} from "vue3-oop";
import {NDataTable, NButton, NGrid, NGi, NTag, NSpace, NCard, NForm, NFormItem, NInput, NSelect } from "naive-ui";
import BpmnModeler from '../../../../BpmnModeler';
import { nicon } from "@/utils/IconUtil";
import styles from './index.module.scss';

interface IProps {
  bpmnModeler: BpmnModeler,
}
@Component()
export default class FormPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {},
  }

  public static tabKey = "FormPanel"
  public static tabName = "表单配置"

  @Mut() private state = {
    formProperty: [] as any[]
  }

  private columns = [
    { title: '标识', key: 'id' },
    { title: '名称', key: 'name' },
    { title: '类型', key: 'type' },
    // { title: '表达式', key: 'expression' },
    // { title: '变量', key: 'variable'},
    { title: '默认值', key: 'default'},
    // { title: '可读', key: 'readable'},
    // { title: '可写', key: 'writable'},
    // { title: '必填', key: 'required'},
    { title: '操作', key: '_options', render:(rowData:any,rowIndex:number)=>(
      <NSpace><NButton onClick={()=>{this.deleteProperty(rowData,rowIndex)}}>删除</NButton></NSpace>
    ) }
  ]

  private deleteProperty=(rowData:any,rowIndex:number)=>{
    const { processProps } = this.props.bpmnModeler;
    this.state.formProperty = this.state.formProperty.filter((item)=>item.id!==rowData.id);
    processProps.formProperty = this.state.formProperty.map(item=>JSON.parse(JSON.stringify(item)));
  }

  private addProperty=()=>{
    const { processProps } = this.props.bpmnModeler;
    const formData = ref({id:'',name:'',type:'string',expression:'',variable:'',default:'',readable:'true',writable:'true',required:'false'}).value;
    const handleConfirm=()=>{
      if(this.state.formProperty.find((item)=>item.id===formData.id)){
        window.$message.error("属性ID重复, 无法添加");return;
      }
      this.state.formProperty.push({
        id:formData.id,name:formData.name,type:formData.type,expression:formData.expression,variable:formData.variable,
        default:formData.default,readable:formData.readable,writable:formData.writable,required:formData.required
      });
      processProps.formProperty = this.state.formProperty.map(item=>JSON.parse(JSON.stringify(item)));
    }
    const dialog = window.$popUp({
      style: {width:"600px",height:"600px"},
      content:()=>(
        <NCard title={`添加表单属性`}>
          {{
            default:()=>(
              <NForm labelPlacement={"left"} labelWidth={100}>
                <NFormItem label='ID' required={true}><NInput value={formData.id} onUpdateValue={(value)=>{formData.id=value}} /></NFormItem>
                <NFormItem label='名称' required={true}><NInput value={formData.name} onUpdateValue={(value)=>{formData.name=value}} /></NFormItem>
                <NFormItem label='类型' required={true}><NSelect options={[{value:'string',label:'string'},{value:'long',label:'long'},{value:'boolean',label:'boolean'},{value:'date',label:'date'}]} value={formData.type} onUpdateValue={(value)=>{formData.type=value}} /></NFormItem>
                <NFormItem label='表达式' required={false}><NInput value={formData.expression} onUpdateValue={(value)=>{formData.expression=value}} /></NFormItem>
                <NFormItem label='变量' required={false}><NInput value={formData.variable} onUpdateValue={(value)=>{formData.variable=value}} /></NFormItem>
                <NFormItem label='默认值' required={false}><NInput value={formData.default} onUpdateValue={(value)=>{formData.default=value}} /></NFormItem>
                <NFormItem label='可读' required={false}><NInput value={formData.readable} onUpdateValue={(value)=>{formData.readable=value}} /></NFormItem>
                <NFormItem label='可写' required={false}><NInput value={formData.writable} onUpdateValue={(value)=>{formData.writable=value}} /></NFormItem>
                <NFormItem label='必填' required={false}><NInput value={formData.required} onUpdateValue={(value)=>{formData.required=value}} /></NFormItem>
              </NForm>
            ),
            footer:()=>(<NSpace>
              <NButton size={"small"} onClick={()=>{handleConfirm();dialog.destroy();}}>确定</NButton>
              <NButton size={"small"} onClick={()=>{dialog.destroy()}}>取消</NButton>
            </NSpace>)
          }}
        </NCard>
      )
    });
  }

  private getConfigValues = ()=>{
    const { processProps } = this.props.bpmnModeler;
    this.state.formProperty = processProps.formProperty.map(item=>JSON.parse(JSON.stringify(item)));
  }

  render(){
    this.getConfigValues();
    return(
      <NGrid cols={1} xGap={10}>
        <NGi>
          <NSpace style={{marginBottom:"5px",justifyContent:"space-between"}}>
            <NTag bordered={false} style={{fontSize:'16px'}} color={{color:'whitesmoke'}}>
              {{ avatar: nicon("FormatListBulletedSharp"), default: ()=>"表单属性" }}
            </NTag>
            <NButton size="small" onClick={this.addProperty}>添加</NButton>
          </NSpace>
          <NDataTable  
            columns={this.columns}
            data={this.state.formProperty}
            pagination={{ pageSize:10 }}
          />
        </NGi>
      </NGrid>
    )
  }
}